<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../css/node.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body,
			{
				background-color: #FFFFFF;
			}
		</style>
	</head>

	<body>

		<div class="mui-content">
			<div id="scroll-wrapper" class="mui-scroll-wrapper" style="top: 20px;">

				<div id="list" class="mui-scroll " style="background-color: #FFFFFF">

					<img src="../icon/myIcon/4.png" width="100%" onclick="onClick('account/account.html');" />
					<img onclick="onClick('account/account.html')" src="../icon/my.jpg" width="100%" />

					<img src="../icon/myIcon/2.png" width="100%" onclick="onClick('my/favorite.html');" />
					<div id="list1">

					</div>

					<img src="../icon/myIcon/3.png" width="100%" onclick="onClick('my/reading.html');" />
					<div id="list2">

					</div>

					<img src="../icon/myIcon/1.png" width="100%" onclick="onClick('my/friend_circle.html');" />
					<div id="list3">

					</div>

					<div id="item">
						<div class="node-frame">
							<div style="height: 60px;">
								<img id="img" class="node-img" src="../img/shuijiao.jpg" height="100%" align="right">
								<p id="theme" class="mc-table">文章标题</p>
							</div>
						</div>
					</div>
					<div id="item2">
						<div class="node-frame">
							<div style="height: 60px;">
								<img id="img" class="node-img" src="../img/shuijiao.jpg" height="100%" align="left">
								<a id="theme" style="color: #000000;">文章标题</a>
								<p id="msg" style="height: 36px; text-overflow: ellipsis; overflow: hidden;">文章标题</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js "></script>
	<script src="../js/app.js"></script>
	<script src="../js/back.js"></script>
	<script src="../json/data1.js"></script>
	<script src="../json/data2.js"></script>
	<script>
		mui.init({
			swipeBack: false, //启用右滑关闭功能
		});

		mui('#scroll-wrapper').scroll();

		function onClick(url) {
			mui.openWindow(url, url);
		}

		mui.plusReady(function() {
			var account = document.getElementById('account');
			var state = app.getState();
			//account.innerText = state.account;

		});

		var list1 = document.getElementById("list1");
		var list2 = document.getElementById("list2");
		var list3 = document.getElementById("list3");
		//		var list4 = document.getElementById("list4");

		var item = document.getElementById("item");
		var item2 = document.getElementById("item2");
		item.style.display = 'none';
		item2.style.display = 'none';

		function createNode(list, o) {
			var div = item.cloneNode(true)
			var theme = div.querySelector("#theme");
			var img = div.querySelector("#img");
			theme.textContent = o.title;
			img.src = o.img[0];
			list.appendChild(div);
			div.style.display = 'inline';
			div.name = o.id;
			div.addEventListener("click", function() {
				mui.openWindow("details.html", this.name);
			});
		}

		for(var i = 0; i < 3; i++) {
			createNode(list1, data1[i]);
		}
		for(var i = 0; i < 3; i++) {
			createNode(list2, data1[i + 6]);
		}
		for(var i = 0; i < 5; i++) {
			var o = data2[i];
			var div = item2.cloneNode(true)
			var theme = div.querySelector("#theme");
			var msg = div.querySelector("#msg");
			var img = div.querySelector("#img");
			theme.textContent = o.title;
			img.src = o.iconSrc;
			msg.textContent = o.msg;
			list3.appendChild(div);
			div.style.display = 'inline';
		}
		//		for(var i = 0; i < 1; i++) {
		//			createNode(list4, data1[i + 7]);
		//		}
	</script>

</html>